<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品管理</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet"  type="text/css" href="css/inputfile.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="easyui/datagrid-detailview.js"></script> 
    <script type="text/javascript" charset="utf-8" src="js/template-native.js"></script>
    <script type="text/javascript" src="js/other.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#productlist').datagrid({
                title:"产品列表",
                pagination: true,
                iconCls: 'icon-save',
                remoteSort:false,
                singleSelect:true,
                nowrap:false,
                width: '100%',
                fitColumns:true,
                data: {
                    total: 20,
                    rows: [
                        { "name": "圆珠笔", "typename": "学生文具", "modelTypes": [
                                {"id": 268,"name": "8911","price": 68},
                                {"id": 269,"name": "8912","price": 78}
                            ], "price": "￥15.5", "flag":1
                        },
                        { "name": "圆规", "typename": "生活用品", "modelTypes": [
                                { "id": 181, "name": "A4", "price": 5.5 },
                                { "id": 182, "name": "A5", "price": 6 }
                            ],"price": "￥15.5", "flag":1
                        },
                        { "name": "三角尺", "typename": "学生文具", "modelTypes": [
                                { "id": 364, "name": "蓝", "price": 12 },
                                { "id": 365, "name": "红", "price": 12 }
                            ],"price": "￥15.5", "flag":0
                        }
                    ]
                },
                columns: [
                    [
                        {field: 'name', title: '产品名称', width: 50, align: 'center'},
                        {field: 'typename', title: '产品类型', width: 50, align: 'center'},
                        {field: 'price', title: '型号--售价', width: 50, align: 'center', formatter: function (val, row,index){
                                let str = "<select style='width: 200px;height:25px;'>";
                                for(let i=0;i<row.modelTypes.length;i++){
                                    str+="<option>"+row.modelTypes[i].name+"--￥"+row.modelTypes[i].price+"</option>";
                                }
                            str+="</select>";
                            return str;
                        }},
                        {field: 'flag', title: '状态', width: 50, align: 'center', formatter: function (val, row,index){
                               if(val==0){
                                   return "<font color='green'>上架</font>";
                               }
                            return "<font color='red'>下架</font>";
                          }
                        }

                    ]
                ],
                toolbar: "#tb",
                pagination: true,
                pageSize: 20,
                singleSelect: true,
                pageList: [5,10,20],
                view: detailview,
                detailFormatter: function(rowIndex, rowData){
                    let html = "<div style='height:400px;width:80%;overflow-x:scroll;overflow-y:scroll;'>"+rowData.name+"</div>"
                    return html;
                }

            });

            $("#queryByType").combobox({
                data: [
                    { "id": 1, "name": "签字笔" },
                    { "id": 2, "name": "画笔" },
                    { "id": 3, "name": "办公用品" },
                ],
                label:'产品类型',
                valueField:'id',
                textField:'name'
            });

            $("#dd").dialog({
                title: '商品编辑',
                closed:true,
                cache: false,
                fit:true,
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){

                    }
                },{
                    text:'关闭',
                    handler:function(){
                        $("#dd").dialog("close");
                    }
                }]
            });
        });

        //显示添加
        function showAdd(){
            $("#dd1").attr("src","productdetail.html");
            $("#dd").dialog("open");
        }

        //关闭添加
        function closeAdd(){
            $("#dd").dialog("close");
        }

        //显示修改
        function showEdit(){
            let row = $('#productlist').datagrid("getSelected");
            if(null==row){
                $.messager.alert('警告','请选择要修改的产品');
                return;
            }
            $("#dd1").attr("src","productdetail.html");
            $("#dd").dialog("open");
          ;
        }
        
        //上架
        function enableProduct(){
            let row = $('#productlist').datagrid("getSelected");
            if(null==row){
                $.messager.alert('警告','请选择要上架的产品');
                return;
            }
        }
        
        //下架
        function disableProduct(){
            let row = $('#productlist').datagrid("getSelected");
            if(null==row){
                $.messager.alert('警告','请选择要下架的产品');
                return;
            }
        }
        
        //置顶
        function upProduct(){
            let row = $('#productlist').datagrid("getSelected");
            if(null==row){
                $.messager.alert('警告','请选择要置顶的产品');
                return;
            }
        }

    </script>
</head>
<body style="margin:8px;">
<div id="tb" style="padding:3px">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="showAdd()">新增</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="showEdit()">修改</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="enableProduct()">上架</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" onclick="disableProduct()">下架</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="upProduct()">置顶</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input id="pname"  class="easyui-textbox"style="width:200px;" data-options="label:'产品名称:'">
    <select id="queryByType" style="width:200px;"></select>
    <select id="queryByFlag" class="easyui-combobox"style="width:200px;" data-options="label:'产品状态:'">
        <option value="">全部</option>
        <option value="0">上架</option>
        <option value="1">下架</option>
    </select>
    <a id="standardQueryBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div>

<table id="productlist"></table>

<div id="dd">
    <iframe scrolling='auto' frameborder='0' id='dd1' style='width:100%; height:100%; display:block;'></iframe>
</div>
</body>
</html>
